<template>
    <div class="NewPromotion">
        <div class="header">
            <img src="./img/promotion1.png" alt="">
        </div>
        <div class="conehsimg">
            <img src="./img/promotion2.png" alt="">
        </div>
        <div class="btns">
            <p class="p-first-child" @click="go('PromCard',{goods_id:$route.query.goods_id || -1})" v-if="false" >我的邀请卡<i class="iconfont icon-jinru"></i></p>
            <p class="p_nth-child" @click="showshare">立即邀请</p>
            <p class="p-last-child">可使用补学劵 <span>{{total}}</span> 张，如何使用 <i class="iconfont icon-wenti" @click="showpopup"></i></p>
        </div>
        <div class="content">
            <div class="title">
                邀请记录
            </div>
            <ul v-infinite-scroll="updata"
                infinite-scroll-disabled="loadingCommit"
                infinite-scroll-distance="10">
                <li v-for=" item in list">
                    <div class="left">
                        <div class="img"><img :src="item.coupon_from_headimg" alt=""></div>
                        <div>{{item.coupon_from_nickname}}</div>
                    </div>
                    <div class="right">
                        <div>
                            <span>{{item.create_time}}</span> <span>邀请成功</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <popups :options="PopupConfig" v-if="popups" @hide="hidepopup"
                @fall="fall()">
        </popups>
        <Shares v-if="shares" :show="3" :ishide="shares" v-on:hide="hideshares"></Shares>
    </div>
</template>

<script>
    import popups from '../../components/TextPopup/index'
    import Shares from '../../components/Share/index'
    import {Toast} from 'mint-ui'

    export default {
        name: "index",
        data: function () {
            return {
                popups: false,
                shares: false,
                PopupConfig: {
                    btnStyle: {
                        width: '70%',
                        height: '4rem',
                        background: '#ffd000',
                        borderRadius: '4rem',
                        color: '#66440a',
                        fontSize: '1.8rem',
                        boxShadow: '0 10px 24px 0 rgba(255, 208, 0, 0.4)'
                    },
                    btnText: '知道了',
                    btnClick: 'fall',
                    title: '如何使用补学劵',
                    content: '在阅读日历页面，点击未阅读的日期，选择使用补学券补阅读，即可完成补阅读，可继续参与坚持阅读赢取奖学金活动，补学券使用后不可退还！' ,
                    Dis: false,
                    icon: true,
                    btnnum: 1,
                },
                total: 0,
                loadingCommit: false,
                page_index: 0,
                list: []
            }
        },
        mounted: function () {
            var data = {
                post_id: this.$route.query.goods_id || -1,
                share_type: 22,
                share_page: 'BuyVip'
            }
            this.share(data)
        },
        methods: {
            updata: function () {
                this.$axios.bigbay_coupon({page_index: ++this.page_index}).then(res => {
                    if (res.data.qing_code === 303) {
                        this.loadingCommit = true
                        return
                    }
                    this.total = res.data.qing_data.total
                    res.data.qing_data.list.forEach(item => {
                        item.create_time = item.create_time.split(' ')[0]
                    })
                    this.loadingCommit = false
                    this.list = this.list.concat(res.data.qing_data.list)
                })
            },
            showshare: function () {
                this.shares = true
            },
            hidepopup: function () {
                this.popups = false
            },
            showpopup: function () {
                this.popups = true
            },
            fall: function () {
                this.hidepopup()
            },
            share: function (data) {
                var obj = {}
                var _this = this
                this.$axios.share_link_info(data).then(res => {
                    var goods = this.$route.query.goods_id || -1
                    var data = {
                        title: res.data.qing_data.title,
                        desc: res.data.qing_data.desc,
                        link: res.data.qing_data.link + '&goods_id=' + goods,
                        imgUrl: res.data.qing_data.img
                    }
                    obj.share_id = res.data.qing_data.share_id
                    obj.share_token = res.data.qing_data.share_token
                    this.$wx.ShareTimeline(data, res => {
                        obj.share_mode = res.share_mode
                        obj.share_type = 22
                        _this.share_done(obj)
                    })
                    this.$wx.ShareAppMessage(data, res => {
                        obj.share_mode = res.share_mode
                        obj.share_type = 22
                        _this.share_done(obj)
                    })
                    // window.localStorage.setItem('Punch_share_data', JSON.stringify(data))
                    // wx.Author(data)
                })
            },
            share_done: function (obj) {
                var _this = this
                _this.shares = false
                this.$axios.share_done(obj).then(res => {
                    if (res.data.qing_code !== 100) {
                        Toast({
                            message: '分享失败',
                            iconClass: 'iconfont icon-bangdingshibai',
                            duration: 5000
                        })
                    } else {
                        Toast({
                            message: '分享成功',
                            iconClass: 'iconfont icon-tianjiachenggong',
                            duration: 5000
                        })
                    }
                })
            },
            hideshares: function () {
                this.shares = false
            },
            go: function (name, str) {
                this.$router.push({
                    name: name,
                    query: str || {}
                })
            },
        },
        components: {
            popups,
            Shares
        }
    }
</script>

<style scoped>
    @import "./css/index.css";
</style>
